<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script>

<div class="on1">
    <div class="on2">
        <img src="${val.pic.largeImg[0]}" alt="">
    </div>
    <div class="on_wk">
        <img src="${val.pic.largeImg[0]}" alt="">
    </div>
    <ul class="on3">
        ${this.createLi(val.img.smallImg)}
    </ul>
</div>
<div class="on4">
    <div class="on5">
        <h1>${val.name}</h1>
    </div>
    <div class="on6">
        <span class="cq">茶七价</span>
        <span class="scj"><span class="fh">￥</span>${val.price}</span>
    </div>
    <div class="on7">
        <p  class="gk">
            顾客评分 : &nbsp;
            <span class="xx">
                <img src="./img/star-small.png" alt="">
                <img src="./img/star-small.png" alt="">
                <img src="./img/star-small.png" alt="">
                <img src="./img/star-small.png" alt="">
                <img src="./img/star-small.png" alt="">
            </span>&nbsp;
            <span class="fen">5.0分</span>&nbsp;
            <span class="pj">（已有31人评价）</span>
        </p>
        <p class="fx">
            <span><img src="./img/teacur.png" alt=""></span>
            &nbsp;
            <span class="fx_wk2">购买立即返<span class="fx_wk1">22</span>茶币</span>
        </p>

        <div class="putin">
            加入购物车
        </div>
    </div>
</div>

</script> -->

<!-- class GoodsList{
    constructor(){
        // this.data = data;
        this.url = "http://localhost/茶七网/project/js/goods.json";
        this.cont = document.querySelector(".cont");
        this.load();
    }
    load(){
        ajax({
            url:this.url
        }).then((res)=>{
            this.res = JSON.parse(res);
            this.display();
        })
    }
    display(){
        // console.log(this.res)
        let str = "";
        for(var i=0;i<this.res.length;i++){
            str += `
                    <div class="goods" index="${this.res[i].goodsId}">
                        <a href="details.html" id="xq">
                            <img src="${this.res[i].pic.largeImg[0]}" alt="">
                            <span class="mn">${this.res[i].price}</span>
                            <p class="jj">${this.res[i].name}</p>
                        </a>
                        <input type="button" value="加入购物车" class="add">
                    </div>
                    `
        }
        this.cont.innerHTML = str;
    }
    addEvent(){
        var that = this;
        this.cont.onclick = function(eve){
            var e = eve || window.event;
            var tar = e.target || e.srcElement;
            if(tar.className === "add"){
                that.goodsId = tar.parentNode.getAttribute("index");
                that.setData();
            }
        }
    }
    setData(){
        var gm = localStorage.getItem("goodsMsg");
        if(gm === null){
            gm = [{
                goodsId:this.goodsId,
                num:1,
                msg:this.getData(this.goodsId)
            }];
        }else{ 
            gm = JSON.parse(gm);
            var zhuangtai = 0;
            for(var i=0;i<gm.length;i++){
                if(gm[i].goodsId === this.goodsId){
                    gm[i].num++;
                    zhuangtai = 1;
                    break;
                }
            }
            if(zhuangtai == 0){
                gm.push({
                    goodsId:this.goodsId,
                    num:1,
                    msg:this.getData(this.goodsId)
                })
            }
        }
        localStorage.setItem("goodsMsg",JSON.stringify(gm));
    }
    getData(id){
        for(var i=0;i<this.res.length;i++){
            if(this.res[i].goodsId === id){
                return this.res[i];
            }
        }
        return {};
    }
}

var gl = new GoodsList();
gl.display();
gl.addEvent(); -->